<template>
  <!-- dialog窗口 用于添加和编辑的弹窗-->
  <el-dialog
    :title="dialogInfo.title"
    @close="dialogClose"
    :visible.sync="dialogVisible"
  >
    <el-form :model="stuForm" :rules="stuRules" ref="addStuRuleForm">
      <el-form-item label="头像">
        <el-upload
          class="uploadAvatar"
          ref="uploadAvatar"
          action="/api/students/uploadStuAvatar"
          list-type="picture-card"
          :on-success="uploadSuccess"
          :on-remove="removeAvatar"
          :limit="1"
          name="headimgurl"
          :multiple="false"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="姓名" prop="name">
        <el-input v-model="stuForm.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="项目地址" prop="productUrl">
        <el-input v-model="stuForm.productUrl" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="班级" prop="class">
        <el-input v-model="stuForm.class" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="stuForm.age" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="城市" prop="city">
        <el-input v-model="stuForm.city" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="学历" prop="degree">
        <el-input v-model="stuForm.degree" autocomplete="off"></el-input>
      </el-form-item>

      <!-- </el-form-item> -->
      <el-form-item label="描述" prop="description">
        <el-input v-model="stuForm.description" autocomplete="off"></el-input>
      </el-form-item>
      <!-- </el-form-item> -->
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="confirmClick('addStuRuleForm')"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>
<script>
import * as api from "@/api"
export default {
  data() {
    return {
      dialogInfo: {
        title: "增加学员信息",
        action: "add", //操作是增加还是编辑
        editSuccessMsg: "增加成功",
        editerrorMsg: "增加失败",
      },
      showAvatar: true,
      dialogVisible: false, //控制dialog显示和隐藏
      stuRules: {
        name: [{ required: true, message: "请输入名字", trigger: "blur" }],
        class: [{ required: true, message: "请输入班级", trigger: "blur" }],
        degree: [{ required: true, message: "请输入学历", trigger: "blur" }],
        city: [{ required: true, message: "请输入城市", trigger: "blur" }],
        productUrl: [
          { required: true, message: "请输入项目地址", trigger: "blur" },
        ],
        age: [{ required: true, message: "请输入年龄", trigger: "blur" }],
        description: [
          { required: true, message: "请输入描述", trigger: "blur" },
        ],
      },
      stuForm: {
        name: "",
        productUrl: "",
        headimgurl: "",
        class: "",
        age: "",
        city: "",
        degree: "",
        description: "",
      },
      oldFrom: {},
    };
  },
  created() {
    // 储存了初始状态的表单数据,为了方便清空表单的内容
    this.oladForm = { ...this.stuForm };
  },
  mounted() {
    //增加功能
    this.$bus.$on("add-stu", () => {
      this.dialogInfo.title = "增加学员信息";
      this.dialogVisible = true;
      //清空表单数据
      this.stuForm={}
      //将当前的行为变为增加
      this.dialogInfo.action="add"
    });

    //编辑功能
    this.$bus.$on("edit-stu", (row) => { //row绑定在另一组件中
      this.dialogInfo.title = "编辑学员信息";
      this.dialogVisible = true;
      //将当前行为定义为编辑 edit
      this.dialogInfo.action="edit"
      //数据回显   对当前数据做浅拷贝，提取需要的信息
      let r = {...row};
      //删除不需要的属性
     
      delete r._id;
      // stuForm重新赋值
      this.stuForm=r
    });

   },
  methods: {
    dialogClose() {
      //dialog关闭时触发的回调
      //清空输入框的值;
      // console.log("999");
      //this.stuForm = this.oldFrom; //清空输入框的值
    },
    uploadSuccess(r) {
      //图片上传成功的回调
      console.log(r);
      this.stuForm.headimgurl=r.headimgurl
    },
    removeAvatar(r) {

    },
    confirmClick(formName) {
        //表单的本地校验 
      this.$refs[formName].validate(valid=>{
       
        // console.log(valid);
        // console.log(this.stuForm);
        if(valid){ //表示本地校验通过 需要发送请求，将数据传递到服务器 关闭dialog
         //关闭dialog
          this.dialogVisible = false;

        switch(this.dialogInfo.action){
          case "add":
            api.addStuApi(this.stuForm)
            .then(res=>{
              // console.log(res); 
              if(res.data.state){ //表示添加成功  更新表格数据  通过bus来实现
              this.$message.success("数据添加成功")
              this.$bus.$emit("update-table","+")
              
              }
            })
            .catch(err=>{
              // console.log(err);
            })
            break
          case "edit":
            api.editStuApi(this.stuForm)
              .then(res=>{
                // console.log(res);
                if(res.data.state){//表示更新成功  
                  this.$bus.$emit("update-table") //视图更新
                  this.$message.success("数据已更新")
                }
              })
              .catch(err=>{
                // console.log(err);
                this.$message.error(err)
              })

        }
        this.$refs.uploadAvatar.clearFiles()  //清楚上传的列表图片clearFiles element 方法


          
        }
      })


      // //表单本地校验
      // this.$refs[formName].validate(valid => {
      //   // console.log(valid)
      //   // console.log(this.stuForm);
      //   if (valid) {
      //     //本地表单校验通过
      //     //发送请求,将数据传递到服务器
          // //关闭dialog
          // this.dialogVisible = false;
      //     //点击确定的时候要判断当前是什么行为,是添加还是编辑
      //     switch (this.dialogInfo.action) {
      //       case 'add'://添加
      //         api.addStuApi(this.stuForm)
      //           .then(res => {
      //             // console.log(res);
      //             if (res.data.state) {
      //               //添加成功
      //               this.$message.success("添加成功")
      //               //更新表格数据 通过bus去通知
      //               this.$bus.$emit("update-table")
      //               //清空表单数据
      //               this.stuForm = this.oldFrom;
      //             }
      //           })
      //           .catch(err => {
      //             console.log(err);
      //           })
      //         break
      //       case 'edit':
      //         api.editStuApi(this.stuForm)
      //           .then(res => {
      //             // console.log(res);
      //             if(res.data.state){
      //               //更新成功
      //               //通知视图更新
      //               this.$bus.$emit("update-table")
      //               this.$message.success("更新成功")
      //             }
      //           })
      //           .catch(err => {
      //             console.log(err);
      //             this.$message.error(err)
      //           })
      //     }
      //   }
      // })
    },
  },
};
</script>
<style>
.uploadAvatar {
  text-align: left;
}
.el-upload-list__item.is-success,
.el-upload--picture-card {
  width: 100px !important;
  height: 100px !important;
  line-height: 100px !important;
}
.el-dialog__header {
  padding: 0 !important;
  line-height: 60px;
}
</style>
